<template>
  <div class="avatar-group" :style="{ width: size + 'px', height: size + 'px' }">
    <image v-for="(avatar, index) in displayedAvatars" :key="index" :src="avatar" />
  </div>
</template>

<script setup>
import { defineProps, computed } from 'vue'

const props = defineProps({
  avatars: { type: Array, default: () => [] },
  size: { type: Number, default: 60 }
})

// 最多显示 4 个
const displayedAvatars = computed(() => props.avatars.slice(0, 4))
</script>

<style scoped>
.avatar-group {
  position: relative;
  border-radius: 50%;
  overflow: hidden;
  background-color: #eee;
}

/* 公共头像样式 */
.avatar-group image {
  position: absolute;
  object-fit: cover;
  /* border-radius: 50%; */
}

/* 单个头像占满整个容器 */
.avatar-group image:only-child {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 两个头像：左上 & 右下 */
.avatar-group image:nth-child(1):nth-last-child(2),
.avatar-group image:nth-child(1):nth-last-child(2) ~ image {
  width: 50%;
  height: 50%;
}
.avatar-group image:nth-child(1):nth-last-child(2) {
  top: 0;
  left: 0;
}
.avatar-group image:nth-child(2):nth-last-child(1) {
  bottom: 0;
  right: 0;
}

/* 三个头像：上面两个，下面左边一个 */
.avatar-group image:nth-child(1):nth-last-child(3) {
  top: 0;
  left: 0;
  width: 50%;
  height: 50%;
}
.avatar-group image:nth-child(2):nth-last-child(2) {
  top: 0;
  right: 0;
  width: 50%;
  height: 50%;
}
.avatar-group image:nth-child(3):nth-last-child(1) {
  bottom: 0;
  left: 0;
  width: 50%;
  height: 50%;
}

/* 四个头像：四个角 */
.avatar-group image:nth-child(1):nth-last-child(4) {
  top: 0;
  left: 0;
  width: 50%;
  height: 50%;
}
.avatar-group image:nth-child(2):nth-last-child(3) {
  top: 0;
  right: 0;
  width: 50%;
  height: 50%;
}
.avatar-group image:nth-child(3):nth-last-child(2) {
  bottom: 0;
  left: 0;
  width: 50%;
  height: 50%;
}
.avatar-group image:nth-child(4):nth-last-child(1) {
  bottom: 0;
  right: 0;
  width: 50%;
  height: 50%;
}
</style>
